<template>
  <div>
    <div class="billCode tcenter box-shadow">【 {{ DetailData.Info.Order }} 】</div>
    <el-tabs :stretch="true" v-model="Type">
      <el-tab-pane label="课程信息" name="1">
        <div class="StatusRow box-shadow">
          <div class="left">
            <div class="label">流程状态：</div>
            <div class="step">
              <div
                v-for="item in statusList"
                :class="{
                  activeStatus: DetailData.Info.State == item.status,
                  OverStatus: DetailData.Info.State > item.status,
                  process: DetailData.Info.State >= item.status
                }"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="right" v-show="DetailData.Info.Close_Result">
            <div class="label flex acenter">
              <div>
                审核结果:
                <span
                  class="approvalResult"
                  :class="ApprovalResultClass[DetailData.Info.Close_Result]"
                  >{{ ApprovalResult[DetailData.Info.Close_Result] }}</span
                >
              </div>
              <div>
                <div class="label">
                  关闭人：<span class="text">{{
                    proxy.$filterUserName(DetailData.Info.Close_User)
                  }}</span>
                </div>
              </div>
            </div>
            <div class="flex mgt10">
              <div class="label">
                关闭时间：<span class="text">{{
                  DetailData.Info.Close_Time
                }}</span>
              </div>
              <div class="label">
                关闭说明：<span class="text">{{
                  DetailData.Info.Close_Remark
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="basicInfo box-shadow bgw mgt10 r10">
          <div class="subTitle">基本信息</div>
          <hr class="hrLine" />
          <el-descriptions direction="vertical" :column="4" :border="true">
            <el-descriptions-item label="课程名称" align="center">{{
              DetailData.Info.Name
            }}</el-descriptions-item>
            <el-descriptions-item label="课程类型" align="center">{{
              DetailData.Info.Name_Type
            }}</el-descriptions-item>
            <el-descriptions-item label="授课形式" align="center">{{
              DetailData.Info.Mode
            }}</el-descriptions-item>
            <el-descriptions-item label="授课老师" align="center">{{
              DetailData.Info.Name_Teacher
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="basicInfo box-shadow bgw mgt10 r10 pdb20 pdr20 pdl20">
          <div class="subTitle">文件信息</div>
          <hr class="hrLine" />
          <div class="fileContent">
            <div class="left">
              <div class="fileType">教案文件</div>
              <div class="content flex">
                <div
                  class="FileItem mgb20"
                  v-for="item in DetailData.LessonPlan"
                  @click="proxy.$openUrl(proxy.$addFileHead(item.Path))"
                >
                  <div class="flex jcenter acenter">
                    <el-image
                      style="height: 40px; width: 40px"
                      :src="FileIcon"
                    />
                  </div>
                  <div class="FileName">{{ item.Name }}</div>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="fileType">课件文件</div>
              <div class="content flex">
                <div
                  class="FileItem mgb20"
                  v-for="item in DetailData.Courseware"
                  @click="proxy.$openUrl(proxy.$addFileHead(item.Path))"
                >
                  <div class="flex jcenter acenter">
                    <el-image
                      style="height: 40px; width: 40px"
                      :src="FileIcon"
                    />
                  </div>
                  <div class="FileName">{{ item.Name }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="basicInfo box-shadow bgw mgt10 r10 pdb20 pdr20 pdl20">
          <div class="subTitle">关联设备</div>
          <hr class="hrLine" />
          <MyTable
            :tableList="DetailData.BindDevice"
            :columns="columns"
            :tabTop="false"
            theme="dark"
          ></MyTable>
        </div>
      </el-tab-pane>
      <el-tab-pane label="试讲信息" name="2">
        <div class="basicInfo box-shadow bgw mgt10 r10 pdb20 pdr20 pdl20">
          <div class="subTitle">试讲地点</div>
          <hr class="hrLine" />
          <div class="tryTalkPlace">
            <div class="item">
              <div>试讲开始时间</div>
              <div>{{ DetailData.Info.TryTime_Start }}</div>
            </div>
            <div class="item">
              <div>预计结束时间</div>
              <div>{{ DetailData.Info.TryTime_End }}</div>
            </div>
            <div class="item">
              <div>实际结束时间</div>
              <div>{{ DetailData.Info.TryTime_RealEnd }}</div>
            </div>
            <div class="item">
              <div>试讲评审人</div>
              <div>{{ DetailData.Info.Name_TryReviewer }}</div>
            </div>
          </div>
        </div>
        <div class="basicInfo box-shadow bgw mgt10 r10 pdb20 pdr20 pdl20">
          <div class="subTitle">试讲参与人员</div>
          <hr class="hrLine" />
          <MyTable
            :tableList="DetailData.Participants"
            :columns="PersonColumns"
            :tabTop="false"
            theme="dark"
          ></MyTable>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="CourseDeveDetail">
import FileIcon from '@/assets/icons/svg/wenjian.svg';
const { proxy } = getCurrentInstance();
const props = defineProps({
  DetailData: {
    default: {
      Info: {},
      LessonPlan: [],
      Courseware: [],
      BindDevice: []
    }
  }
});
const ApprovalResult = {
  3: '审核通过',
  2: '终审不通过',
  1: '初审不通过'
};
const ApprovalResultClass = {
  3: 'success',
  2: 'error',
  1: 'error'
};
const activeStatus = 3;
const statusList = [
  {
    name: '待初审',
    status: 1
  },
  {
    name: '待试讲',
    status: 2
  },
  {
    name: '待终审',
    status: 3
  },
  {
    name: '已关闭',
    status: 4
  }
];
const Type = ref('1');
const DetailData = computed(() => props.DetailData);
const columns = ref([
  { label: '序号' },
  { label: '设备编号', prop: 'Code' },
  { label: '设备名称', prop: 'Name' }
]);
proxy.$formatKey(columns.value);
const tableList = ref([{ name: '55  ' }]);
const PersonColumns = ref([
  { label: '序号' },
  { label: '姓名', prop: 'Name_Participants' },
  { label: '类别', prop: 'TypeName' },
  { label: '评分', prop: 'Score', rate: true, disabled: true },
  { label: '评语', prop: 'Comment' }
]);
proxy.$formatKey(PersonColumns.value);
</script>

<style lang="scss" scoped>
.subTitle {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding-top: 10px;
  width: 100%;
}
.billCode {
  font-size: 16px;
  background-color: white;
  padding: 10px 0;
  border-radius: 10px;
}
.StatusRow {
  font-size: 14px;
  background-color: white;
  padding: 10px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  .label {
    font-weight: bold;
  }
  .left {
    width: 50%;
    display: flex;
    align-items: center;
    .step {
      display: flex;
      .activeStatus {
        background-color: #8a38f5;
      }
      .OverStatus {
        background-color: #356df2;
      }
      & > div {
        background-color: #818181;
        padding: 5px 8px;
        color: white;
        border-radius: 6px;
        & + div {
          position: relative;
          margin-left: 40px;
          &::before {
            content: '';
            position: absolute;
            width: 40px;
            height: 2px;
            left: -40px;
            top: 50%;
            transform: translateY(-50%);
            background-color: #818181;
          }
          &::after {
            content: '>';
            position: absolute;
            left: -22px;
            color: #818181;
            top: 50%;
            font-size: 20px;
            transform: translateY(-50%);
          }
          &.process {
            &::before {
              background-color: #356df2;
            }
            &::after {
              color: #356df2;
            }
          }
        }
      }
    }
  }
  .right {
    width: 50%;
    .label {
      margin-left: 20px;
    }
    .text {
      font-size: 14px;
    }
    .approvalResult {
      height: 30px;
      line-height: 30px;
      font-size: 14px;

      &.success {
        background-color: #e6f6f5;
        color: #03a89e;
        padding: 5px 20px;
        border-radius: 15px;
      }
      &.error {
        background-color: #f8c6c6;
        color: #e02504;
        padding: 5px 20px;
        border-radius: 15px;
      }
    }
  }
}
.basicInfo {
  overflow: hidden;
  .fileContent {
    display: flex;
    justify-content: space-between;
    & .content {
      background-color: #f4f8ff;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 0;
      .FileItem {
        flex-wrap: wrap;
        max-width: 100px;
        cursor: pointer;
        .FileName {
          max-width: 100px;
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: keep-all;
          white-space: nowrap;
          color: $color;
          text-align: center;
          margin-top: 10px;
        }
      }
    }
    .left {
      width: 48%;
    }
    .right {
      width: 48%;
    }
    .fileType {
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 10px;
    }
  }
}
.hrLine {
  border-color: #e4e7ed;
  opacity: 0.3;
  width: 80%;
  margin-bottom: 10px;
}
.tryTalkPlace {
  display: flex;
  .item {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    & + .item {
      border-left: 1px solid #e4e7ed;
    }
  }
}
</style>
